/* component */
import { RoleViewLeftPanel, RoleViewRightPanel } from '@src/modules/account/roleService/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useProductLine } from '@shb-lib/tenant'
/* store */
import { useStoreCurrentSelectRole, useStoreInitData, useStoreFetchAuthGroups, useStoreAuthGroups, useStoreFetchRoleTree, useStoreRoleCurrentProduct } from '@src/modules/account/roleService/store/hooks'
/* scss */
import '@src/modules/account/roleService/index.scss'
/* vue */
import { ComponentInstance, computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
import Vue, { VNode } from 'vue'
/* util */
import { getRootWindow } from '@src/util/dom'

export type RoleManagementViewProps = {
  
}

export interface RoleManagementViewSetupState {
  
}

export enum RoleManagementViewEventEnum {
  Input = 'input'
}

export type RoleManagementViewEmitsOptions = {
  input: () => void;
}

export type RoleManagementViewInstance = ComponentInstance & RoleManagementViewSetupState
export type RoleManagementViewVM = RoleManagementViewSetupState & RoleManagementViewProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleManagementView,
  emits: [RoleManagementViewEventEnum.Input],
  setup(props: RoleManagementViewProps, { slots, emit }) {
    
    const { initData } = useStoreInitData()
    
    const { currentProduct, setCurrentProduct } = useStoreRoleCurrentProduct()
    const { currentProductLine } = useProductLine()
    
    const fetchRoleTree = useStoreFetchRoleTree(true)
    const fetchAuthGroups = useStoreFetchAuthGroups()
    const { currentSelectRole } = useStoreCurrentSelectRole()
    
    const { authGroups } = useStoreAuthGroups()
    
    const rootWindow = getRootWindow(window)
    const rootInstance = (rootWindow?.getGlobalRootInstance && rootWindow?.getGlobalRootInstance()) || {}
    
    const isShowTrail = computed(() => {
      return rootInstance.isShowTrail
    })
    
    const classNames = computed(() => {
      return [
        ComponentNameEnum.RoleManagementView,
        isShowTrail.value ? 'role-management-view-trail' : ''
      ]
    })
    
    watch(currentSelectRole, () => {
      fetchAuthGroups()
    })
    
    onBeforeMount(() => {
      // 设置当前产品线
      setCurrentProduct(currentProductLine.value)
      // 默认选择第一个
      fetchRoleTree()
    })
    
    return {
      initData,
      authGroups,
      classNames
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        <RoleViewLeftPanel />
        
        <RoleViewRightPanel />
        
      </div>
    ) as any
  }
})
